<script setup>
import { ref, watch } from 'vue'
import { getUserRatingAPI } from '@/api/rating'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  dishId: {
    type: [Number, String],
    required: true
  }
})

const emit = defineEmits(['update:visible'])

// 关闭处理方法
const handleClose = (value = false) => {
  emit('update:visible', value)
}

// 评分数据
const ratings = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(4)

// 监听visible变化，当显示时加载数据
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      currentPage.value = 1 // 重置页码
      fetchRatings()
    }
  }
)

// 监听dishId变化，重新加载数据
watch(
  () => props.dishId,
  () => {
    if (props.visible) {
      currentPage.value = 1
      fetchRatings()
    }
  }
)

// 获取评分数据
const fetchRatings = async () => {
  try {
    loading.value = true
    const res = await getUserRatingAPI(
      props.dishId,
      currentPage.value,
      pageSize.value
    )

    if (res.data.code === 1 && res.data.data) {
      ratings.value = res.data.data.records || []
      total.value = res.data.data.total || 0
    } else {
      ElMessage.warning('获取评分列表失败')
      ratings.value = []
      total.value = 0
    }
  } catch (error) {
    ElMessage.error('获取评分列表失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 分页变化
const handleCurrentChange = (page) => {
  currentPage.value = page
  fetchRatings()
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString()
}
</script>

<template>
  <el-dialog
    title="用户评分列表"
    :model-value="visible"
    @update:model-value="handleClose"
    width="30%"
    :close-on-click-modal="false"
    :height="500"
    class="rating-dialog"
  >
    <!-- 添加滚动容器 -->
    <div class="dialog-content">
      <el-table
        :data="ratings"
        style="width: 100%; min-height: 300px"
        v-loading="loading"
        element-loading-text="加载中..."
        empty-text="暂无评分数据"
        :cell-style="{ padding: '12px 0' }"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="userId" label="用户ID" width="100" />
        <el-table-column label="评分" width="150">
          <template #default="scope">
            <div class="rating-stars">
              <span
                v-for="star in 5"
                :key="star"
                class="star"
                :class="{ filled: star <= scope.row.score }"
                >★</span
              >
              <span class="rating-value">{{ scope.row.score.toFixed(1) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="评价时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <template #footer>
      <el-button @click="handleClose(false)">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.rating-dialog {
  /* 确保弹窗内容区域有足够高度 */
  --el-dialog-max-height: 90vh;
}

.dialog-content {
  /* 内容区域设置最小高度和滚动 */
  min-height: 400px;
  max-height: calc(600px - 120px); /* 减去标题和底部高度 */
  overflow-y: auto;
  padding-right: 10px; /* 避免滚动条与内容重叠 */
}

.rating-stars {
  display: inline-flex;
  align-items: center;
  padding: 8px 0; /* 增加评分区域的内边距 */
}

.star {
  color: #ccc;
  font-size: 18px; /* 增大星星尺寸 */
  margin-right: 3px;
}

.star.filled {
  color: #f90;
}

.rating-value {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 500;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

/* 调整表格行高 */
::v-deep .el-table__row {
  height: 60px !important;
}

/* 调整表头样式 */
::v-deep .el-table__header th {
  padding: 12px 0 !important;
  background-color: #f5f7fa;
}
</style>
